import icon_daily from "@/assets/images/icon_daily.png";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { useCallback, useState } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
export default function IndexTopBar() {
  const [tab, setTab] = useState("关注");
  const tabList = [
    {
      label: "关注",
    },
    {
      label: "发现",
    },
    {
      label: "成都",
    },
  ];
  const handlePress = useCallback((item: string) => {
    setTab(item);
  }, []);
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.dailyButton}>
        <Image style={styles.icon} source={icon_daily} />
      </TouchableOpacity>
      <View style={styles.typeBox}>
        {tabList.map((item) => (
          <TouchableOpacity
            activeOpacity={0.5}
            onPress={() => handlePress(item.label)}
            key={item.label}
            style={[styles.itemBox, tab === item.label && styles.activeItemBox]}
          >
            <Text
              style={[
                styles.itemText,
                tab === item.label && styles.activeItemText,
              ]}
            >
              {item.label}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <MaterialIcons name="search" size={24} color="black" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderBottomWidth: 1,
    borderBottomColor: "#f5f5f5",
    backgroundColor: "#fff",
  },
  icon: {
    width: 28,
    height: 28,
  },
  dailyButton: {
    justifyContent: "center",
    alignItems: "center",
  },
  typeBox: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  itemBox: {
    marginHorizontal: 12,
    paddingVertical: 4,
  },
  activeItemBox: {
    borderBottomWidth: 3,
    borderBottomColor: "#ff2442",
  },
  itemText: {
    fontSize: 16,
    color: "#999",
  },
  activeItemText: {
    fontSize: 17,
    color: "#333",
  },
});
